@extends('layouts.admin')
@section('content')

<script src="{{ asset('js/2019/dropzone.js') }}"></script>


<style>
.col-xs-2 {
	text-align: right;
	line-height: 35px;
}
</style>

<div class="admin-home">
	<div class="panel panel-info my-container">

		<div class="panel-heading">
	    <h1 class="panel-title">
	      <ol class="breadcrumb">
	        <li><a href="{{ URL('admin') }}">后台首页</a></li>
	        <li><a href="{{ URL('/admin/cocktail/aticle/list') }}">文章列表</a></li>
	        <li class="active">文章详情</li>
	      </ol>
	    </h1>
	  </div>

	  {{--  --}}
	  <div class="panel-body">
	  	<div class="col-xs-2">名称：</div>
			<div class="col-xs-4"><input type="text" class="form-control name" value="{{ $obj->name }}"></div>
			<div class="clear"></div>
			<div class="col-xs-2">是否展示：</div>
      <div class="col-xs-4">
        <select class="form-control enable">
          @foreach ([1=>'是',0=>'否'] as $key=>$value)
            <option value="{{ $key }}"
            @if ( $obj->enable == $key )
              selected 
            @endif
            >{{ $value }}</option>
          @endforeach
        </select>
      </div>
      <div class="clear"></div>
      <div class="col-xs-2">是否经典：</div>
			<div class="col-xs-4">
				<select class="form-control classic">
					@foreach ([1=>'是',0=>'否'] as $key=>$value)
						<option value="{{ $key }}"
            @if ( $obj->classic == $key )
              selected 
            @endif
            >{{ $value }}</option>
					@endforeach
				</select>
			</div>
			<div class="clear"></div>
			<div class="col-xs-2">图片：</div>
			<div class="col-xs-10">
				<div class="col-xs-12 upload">
          <h1>
            点击上传房屋图片
            <div style="font-size: 50px;">支持拖拽到此区域上传</div>
          </h1>
          @if ($obj->image)
            <div class="dz-preview" data-pic-name="{{ $obj->image }}"><div class="dz-image"><img style="height: 197px;" src="{{ asset('sys_images/'.$obj->image) }}" alt="pic" /><div class="dz-error-mark"><svg width="54px" height="54px" viewBox="0 0 54 54" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" xmlns:sketch="http://www.bohemiancoding.com/sketch/ns"><title>Error</title><defs></defs><g id="Page-1" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd" sketch:type="MSPage"><g id="Check-+-Oval-2" sketch:type="MSLayerGroup" stroke="#747474" stroke-opacity="0.198794158" fill="#FFFFFF" fill-opacity="0.816519475"><path d="M32.6568542,29 L38.3106978,23.3461564 C39.8771021,21.7797521 39.8758057,19.2483887 38.3137085,17.6862915 C36.7547899,16.1273729 34.2176035,16.1255422 32.6538436,17.6893022 L27,23.3431458 L21.3461564,17.6893022 C19.7823965,16.1255422 17.2452101,16.1273729 15.6862915,17.6862915 C14.1241943,19.2483887 14.1228979,21.7797521 15.6893022,23.3461564 L21.3431458,29 L15.6893022,34.6538436 C14.1228979,36.2202479 14.1241943,38.7516113 15.6862915,40.3137085 C17.2452101,41.8726271 19.7823965,41.8744578 21.3461564,40.3106978 L27,34.6568542 L32.6538436,40.3106978 C34.2176035,41.8744578 36.7547899,41.8726271 38.3137085,40.3137085 C39.8758057,38.7516113 39.8771021,36.2202479 38.3106978,34.6538436 L32.6568542,29 Z M27,53 C41.3594035,53 53,41.3594035 53,27 C53,12.6405965 41.3594035,1 27,1 C12.6405965,1 1,12.6405965 1,27 C1,41.3594035 12.6405965,53 27,53 Z" id="Oval-2" sketch:type="MSShapeGroup"></path></g></g></svg></div></div></div>
          @endif
        </div>
			</div>
			<div class="clear"></div>
			<div class="col-xs-2">故事：</div>
			<div class="col-xs-10">
				<textarea class="form-control story" cols="100%" rows="5">{{ $obj->story }}</textarea>
			</div>
			<div class="clear"></div>
      <div class="col-xs-2">原料：</div>
			<div class="col-xs-10">
				<textarea class="form-control material" cols="100%" rows="5">{{ $obj->material }}</textarea>
			</div>
			<div class="clear"></div>
      <div class="col-xs-2">器具：</div>
			<div class="col-xs-10">
				<textarea class="form-control ware" cols="100%" rows="5">{{ $obj->ware }}</textarea>
			</div>
			<div class="clear"></div>
      <div class="col-xs-2">制作步骤：</div>
			<div class="col-xs-10">
				<textarea class="form-control step" cols="100%" rows="5">{{ $obj->step }}</textarea>
			</div>
			<div class="clear"></div>
      <div class="col-xs-2">特色：</div>
			<div class="col-xs-10">
				<textarea class="form-control feature" cols="100%" rows="5">{{ $obj->feature }}</textarea>
			</div>
			<div class="clear"></div>
      <div class="col-xs-12">
	  		<span class="btn btn-info add" style="width: 100%;line-height: 26px;font-size: 27px;">保 存</span>
	  	</div>

	  </div>

	</div>
	
</div>


<script>
BROSWER_NOT_SUPPORT = false;
var myDropzone = new Dropzone($('.upload')[0], {
  url: "{{ url('api/upload/image') }}",
  fallback: function() {
    BROSWER_NOT_SUPPORT = true;
    alert('你的浏览器不支持拖动上传图片，请使用谷歌 Chrome 浏览器！');
  }
});
var reCountUploadHeight = function() {
  var height = (parseInt($('.dz-preview').length / 7) + 1) * 170 + 30;
  if (height > 300) {
    $('.upload').css({height: height + 'px'});
  }
};
reCountUploadHeight();
if (!BROSWER_NOT_SUPPORT) {
  myDropzone.on('drop', function(){
  });
  myDropzone.on("success", function(file) {
    var fileName = file.xhr.response;
    $(file.previewElement).attr('data-pic-name', fileName);
    $('.dz-success-mark').remove();
    $('.dz-details').remove();
    // $('.dz-error-mark').remove();
    $('.dz-error-mark').click(function() {
      $(this).parents('.dz-preview').remove();
    });
    reCountUploadHeight();
  });
}
$('.dz-preview .dz-error-mark').click(function() {
  $(this).parents('.dz-preview').remove();
});

$('.upload > h1').click(function(event) {
  $('.upload').click();
});


SUBMIT_FLAG = false;
$(".add").click(function(event) {
	/* Act on the event */

  if ( SUBMIT_FLAG ) {
    noticeToUser('系统正在处理，请稍后');
    return false;
  }
	
  // swal("干得漂亮！", "你点击了按钮！","success");
  var name = $(".name").val();
  var enable = $(".enable").val();
  var classic = $(".classic").val();
  var story = $(".story").val();
  var material = $(".material").val();
  var ware = $(".ware").val();
  var step = $(".step").val();
  var feature = $(".feature").val();

  if ( name == '' ) {
    noticeToUser('请填写名称');
    return false;
  } else if ( story == '' ) {
    noticeToUser('请填写故事');
    return false;
  } else if ( material == '' ) {
    noticeToUser('请填写原料');
    return false;
  } else if ( ware == '' ) {
    noticeToUser('请填写器具');
    return false;
  } else if ( step == '' ) {
    noticeToUser('请填写制作步骤');
    return false;
  } else if ( feature == '' ) {
    noticeToUser('请填写特色');
    return false;
  }

  var image = "";
  $('.upload').find('.dz-preview').each(function() {
    image = $(this).attr('data-pic-name');
  });

  var data = {
    name: name,
    image: image,
    enable: enable,
    classic: classic,
    story: story,
    material: material,
    ware: ware,
    step: step,
    feature: feature,
    _token: '{{ csrf_token() }}'
  };

  $.ajax({
    url: '{{ url('api/cocktail/aticle/edit/'.$obj->id) }}',
    method: 'post',
    dataType:'json',
    data: data,
    success: function(data) {
      if (data.status === 0) {
        localStorage.setItem("remindMessage",'保存成功');
        window.location.href = '{{ url('admin/cocktail/aticle/list') }}';
      } else {
        noticeToUser(data.message);
      }
    },
    error: function() {
      swal("提交出错，请刷新o(╯□╰)o", "", "error")
    }
  });

});
</script>

@stop